<template>
    <div id="app">
        <Head>项目管理</Head>
        <div class="center" v-if="list.length>0">
            <div class="tisp">仅审核通过的项目信息才对外显示哦~</div>
            <van-list class="list"
              v-model="loading"
              :finished="finished"
              :finished-text="finished_text"
              @load="onLoad"
              :immediate-check="false" >
                <div class="item" v-for="(item,index) in list" :key="index">
                    <div class="name">{{item.title}}</div>
                    <div class="lookdiv">
                        <div class="looknum">浏览{{item.view_times}}次</div>
                        <div class="time">{{item.refreshtime}} 更新</div>
                    </div>
                    <div class="statediv">
                        <div :class="item.audit==0?'verify':item.audit==1?'pass':'notpass'">
                            {{item.audit==0?"审核中":item.audit==1?"审核通过":"未通过"}}&nbsp;
                            <div class="span">{{item.reason?"( "+item.reason+" )":""}}</div>
                        </div>
                        <div class="btndiv">
                            <div class="refresh" v-if="item.audit==1&item.is_public==1" @click="refresh(item.id)">刷新</div>
                            <div class="modify" @click="upd(item.id)">修改</div>
                            <div class="open" v-if="item.audit==1&item.is_public==0" @click="isopen(item.id,1)">开启</div>
                            <div class="colse" v-if="item.audit==1&item.is_public==1" @click="isopen(item.id,0)">关闭</div>
                            <div class="promote" v-if="item.audit==1&item.is_public==1&&item.is_top==0" @click="promote(item.id,item.title)">推广</div>
                            <div class="delete" v-if="item.audit==0||item.audit==2||item.is_public==0" @click="del(item.id)">删除</div>
                        </div>
                    </div>
                </div>
            </van-list>
            <router-link class="release" to="/freelance/release">发布新项目</router-link>
        </div>
        <Datanull class="null" v-else>
            <template v-slot:btn>
                <router-link class="btn" to="/freelance/release">发布新项目</router-link>
            </template>
        </Datanull>
        <van-popup v-model="showPayment" closeable position="bottom">
            <PopupPayment
                :amount="refreshmoney"
                @handlerSubmit="handlerSubmit"
            ></PopupPayment>
        </van-popup>
        <PaySubmit ref="paySubmit" :payment="paymoth" success-url="/freelance/promanage"></PaySubmit>
    </div>
</template>
<script>
import PaySubmit from '@/components/service/PaySubmit'
import PopupPayment from '@/components/service/PopupPayment'
import Datanull from '@/components/freelance/datanull'
import http from '@/utils/http'
import api from '@/api'
export default {
  components: {
    PaySubmit,
    PopupPayment,
    Datanull
  },
  data () {
    return {
      loading: false,
      finished: false,
      finished_text: '',
      page: 1,
      pagesize: 15,
      list: [],
      param: {
        id: '',
        order_type: 5
      },
      refreshmoney: 0,
      paymoth: 'wxpay',
      showPayment: false
    }
  },
  created () {
    this.refreshmoney = this.$store.state.config.freelance_refresh_subject_fee
    // 请求数据
    this.fetchData(true)
  },
  methods: {
    onLoad () {
      if (!this.finished) {
        this.page++
        this.fetchData(false)
      }
    },
    // 刷新
    refresh (id) {
      this.param.id = id
      if (this.refreshmoney <= 0) {
        http.post(api.order_pay, this.param)
          .then(res => {
            this.fetchData(true)
          }).catch(() => {})
      } else {
        this.showPayment = true
      }
    },
    // 修改
    upd (id) {
      this.$router.push({
        path: '/freelance/release',
        query: {
          id: id
        }
      })
    },
    // 1开启 0关闭
    isopen (id, type) {
      const param = {
        subject_id: id,
        is_public: type
      }
      http
        .post(api.set_subject_public, param)
        .then(res => {
          if (parseInt(res.code) === 200) {
            this.$notify({ type: 'success', message: res.message })
            this.fetchData(true)
          } else {
            this.$notify(res.message)
          }
        }).catch(err => {
          console.log(err)
        })
    },
    // 推广
    promote (id, name) {
      this.$router.push({
        path: '/freelance/promote',
        query: {
          id: id,
          name: name
        }
      })
    },
    // 删除
    del (id) {
      var that = this
      that.$dialog
        .confirm({
          title: '系统提示',
          message: '确定要删除吗?'
        })
        .then(() => {
          const param = {
            subject_id: id
          }
          http
            .post(api.del_subject, param)
            .then(res => {
              if (parseInt(res.code) === 200) {
                this.$notify({ type: 'success', message: res.message })
                this.fetchData(true)
              } else {
                this.$notify(res.message)
              }
            }).catch(err => {
              console.log(err)
            })
        })
        .catch(() => {})
    },
    fetchData (init) {
      if (init === true) {
        this.page = 1
        this.finished_text = ''
        this.finished = false
      }
      this.loading = true
      http.get(api.subjectmag_list, {
        page: this.page,
        pageSize: this.pagesize
      })
        .then(res => {
          if (init === true) {
            this.list = [...res.data.list]
          } else {
            this.list = this.list.concat(res.data.list)
          }
          // 加载状态结束
          this.loading = false

          // 数据全部加载完成
          if (res.data.list.length < this.pagesize) {
            this.finished = true
            if (init === false) {
              this.finished_text = '没有更多了'
            }
          }
        }).catch(() => {})
    },
    handlerSubmit (payment) {
      this.paymoth = payment
      this.$refs.paySubmit.handlerSubmit(api.order_pay, {
        id: this.param.id,
        order_type: this.param.order_type,
        pay_type: this.paymoth,
        redirect_url: this.$store.state.config.mobile_domain + 'freelance/promanage'
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.center{
    .tisp{
        height: 35px;
        line-height: 1;
        border-radius: 50px;
        background-color: #fff5ec;
        background-image: url('../../assets/freelance/images/tisp_03.png');
        background-position: 11px center;
        background-repeat: no-repeat;
        background-size: 24px 23px;
        font-size: 13px;
        color: #a4680e;
        padding-left: 45px;
        display: flex;
        align-items: center;
        margin: 17px 12px 17px 12px;
    }
    .list{
        height: calc(100vh - 60px - 62px);
        background-color: #f6f6f6;
        padding: 6px 12px 80px 12px;
        overflow: auto;
        .item{
            border-radius: 3px;
            background-color: #ffffff;
            margin-bottom: 14px;
            padding-top: 18px;
            padding-bottom: 10px;
            padding-left: 10px;
            padding-right: 10px;
            .name{
                padding-left: 8px;
                padding-right: 8px;
                line-height: 1;
                font-size: 15px;
                color: #333333;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
            .lookdiv{
                margin-top: 14px;
                margin-bottom: 10px;
                padding-bottom: 17px;
                padding-left: 8px;
                border-bottom: 1px dashed #ebecec;
                position: relative;
                display: flex;
                .looknum{
                    line-height: 1;
                    font-size: 13px;
                    color: #a3a7af;
                }
                .time{
                    line-height: 1;
                    position: absolute;
                    right: 8px;
                    font-size: 13px;
                    color: #a3a7af;
                }
            }
            .statediv{
                display: flex;
                padding-left: 8px;
                align-items: center;
                position: relative;
                .verify{
                    line-height: 1;
                    font-size: 14px;
                    color: #1787fb;
                }
                .pass{
                    line-height: 1;
                    font-size: 14px;
                    color: #00b57b;
                }
                .notpass{
                    line-height: 1;
                    font-size: 14px;
                    color: #ff6600;
                    display: flex;
                    .span{
                        width: 160px;
                        line-height: 1;
                        font-size: 12px;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                    }
                }
                .btndiv{
                    display: flex;
                    position: absolute;
                    right: 8px;
                    .refresh{
                        width: 47px;
                        height: 23px;
                        margin-left: 6px;
                        line-height: 1;
                        border-radius: 50px;
                        border: 1px solid #ececec;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        font-size: 12px;
                        color: #555555;
                    }
                    .modify{
                        width: 47px;
                        height: 23px;
                        margin-left: 6px;
                        line-height: 1;
                        border-radius: 50px;
                        border: 1px solid #ececec;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        font-size: 12px;
                        color: #555555;
                    }
                    .open{
                        width: 47px;
                        height: 23px;
                        margin-left: 6px;
                        line-height: 1;
                        border-radius: 50px;
                        border: 1px solid #ececec;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        font-size: 12px;
                        color: #555555;
                    }
                    .colse{
                        width: 47px;
                        height: 23px;
                        margin-left: 6px;
                        line-height: 1;
                        border-radius: 50px;
                        border: 1px solid #ececec;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        font-size: 12px;
                        color: #555555;
                    }
                    .promote{
                        width: 47px;
                        height: 23px;
                        margin-left: 6px;
                        line-height: 1;
                        border-radius: 50px;
                        border: 1px solid #fcdb21;
                        background-color: #fcdb21;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        font-size: 12px;
                        color: #1f2828;
                    }
                    .delete{
                        width: 47px;
                        height: 23px;
                        margin-left: 6px;
                        line-height: 1;
                        border-radius: 50px;
                        border: 1px solid #ececec;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        font-size: 12px;
                        color: #555555;
                    }
                }
            }
        }
    }
    .list::-webkit-scrollbar{
        display: none;
    }
    .release{
        position: fixed;
        left: 21px;
        bottom: 29px;
        width: calc(100vw - 42px);
        height: 47px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 20px;
        color: #464646;
        border-radius: 50px;
        background-color: #fed700;
        box-shadow: 0px 1px 7px rgba($color: #fed700, $alpha: 0.8);
    }
}
.null{
    height: calc(100vh - 60px);
    overflow: auto;
}
</style>
